<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { NButton } from "naive-ui";
import * as echarts from "echarts";
import { BarChart, LineChart } from "echarts/charts";
import { BarSeriesOption, ComposeOption, PieSeriesOption } from "echarts";
// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = ComposeOption<BarSeriesOption | PieSeriesOption>;
export default defineComponent({
  name: "qulity-scheme",
  components: {
    NButton,
    BarChart,
  },
  setup() {
    const barChart = ref<HTMLElement>();
    const pieChart = ref<HTMLElement>();
    const myChart = ref<any>();
    const baroption: ECOption = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "9%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          axisTick: {
            alignWithLabel: true,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "Direct",
          type: "bar",
          barWidth: "60%",
          data: [10, 52, 200, 334, 390, 330, 220],
        },
      ],
    };
    const pieoption: ECOption = {
      title: {
        text: "Referer of a Website",
        subtext: "Fake Data",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: "50%",
          data: [
            { value: 1048, name: "Search Engine" },
            { value: 735, name: "Direct" },
            { value: 580, name: "Email" },
            { value: 484, name: "Union Ads" },
            { value: 300, name: "Video Ads" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };

    const initBarECharts = () => {
      myChart.value = echarts.init(barChart.value!);
      myChart.value.setOption(baroption);
    };
    const initPieECharts = () => {
      myChart.value = echarts.init(pieChart.value!);
      myChart.value.setOption(pieoption);
    };
    onMounted(() => {
      initBarECharts();
      initPieECharts();
    });
    return {
      barChart,
      pieChart,
      baroption,
      pieoption,
      initBarECharts,
      initPieECharts,
    };
  },
});
</script>
<template>
  <div class="qulity-scheme">
    <div class="header">
      <h1>数据管理</h1>
    </div>
    <div class="main">
      <div class="main-box">
        <div class="panel bar">
          <h2>柱形图-门诊转住院部趋势</h2>
          <div class="echarts" ref="barChart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel">
          <h2>柱形图-门诊转住院部趋势</h2>
          <div class="echarts" ref="pieChart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel">
          <h2>柱形图-门诊转住院部趋势</h2>
          <div class="echarts" ></div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <div class="main-box">
        <div class="panel">
          <div class="echarts" ></div>
          <div class="panel-footer"></div>
        </div>
        <div class="map">
          <div class="map-bg"></div>
        </div>
      </div>
      <div class="main-box">
        <div class="panel">
          <h2>柱形图-门诊转住院部趋势</h2>
          <div class="echarts" ></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel">
          <h2>柱形图-门诊转住院部趋势</h2>
          <div class="echarts" ></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel">
          <h2>柱形图-门诊转住院部趋势</h2>
          <div class="echarts" ></div>
          <div class="panel-footer"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
* {
  box-sizing: border-box;
  .qulity-scheme {
    height: 100%;
    background-repeat: no-repeat top center;
    background-image: url(@/assets/bg.jpg);
    .header {
      height: 3.5rem;
      background-image: url(@/assets/head_bg.png);
      & > h1 {
        margin: 0;
        height: 60px;
        color: #ffffff;
        text-align: center;
        line-height: 60px;
      }
    }
    .main {
      display: flex;
      height: calc(100% - 3.5rem);
      padding: 10px;
      .main-box {
        flex: 3;
      }
      .main-box:nth-child(2) {
        flex: 5;
        margin: 0 10px 15px;
      }
      .panel {
        position: relative;
        // height:30%;
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid rgba(25, 186, 139, 0.17);
        background-image: url(@/assets/line.png);
        &::before {
          position: absolute;
          top: 0;
          left: 0;
          content: "";
          width: 10px;
          height: 10px;
          border-left: 2px solid #02a6b5;
          border-top: 2px solid #02a6b5;
        }
        &::after {
          position: absolute;
          right: 0;
          top: 0;
          content: "";
          width: 10px;
          height: 10px;
          border-right: 2px solid #02a6b5;
          border-top: 2px solid #02a6b5;
        }
      }
      .panel-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        &::before {
          position: absolute;
          bottom: 0;
          left: 0;
          content: "";
          width: 10px;
          height: 10px;
          border-left: 2px solid #02a6b5;
          border-bottom: 2px solid #02a6b5;
        }
        &::after {
          position: absolute;
          right: 0;
          bottom: 0;
          content: "";
          width: 10px;
          height: 10px;
          border-right: 2px solid #02a6b5;
          border-bottom: 2px solid #02a6b5;
        }
      }
      h2 {
        height: 10px;
        color: #ffffff;
        line-height: 10px;
        text-align: center;
        font-size: 14;
        font-weight: 400;
      }
      .echarts {
        height: 130px;
        
        // background-color: pink;
      }
      .map {
        position: relative;
        height: 440px;
        .map-bg {
          width: 430px;
          height: 430px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background-image: url(@/assets/map.png);
          opacity: 0.3;
        }
      }
    }
  }
}
</style>
